<template>
    <div class="table">
        <div  class="divSearch">
            <Row>
                <Col v-show="userinfo.AreaCode=='530000000000'">
                    <label class="searchLabel">所属地区:</label>
                    <!-- <Cascader :data="AreaList" change-on-select @on-change='SearchCascaderChange'  class="searchInput"></Cascader>-->
                    <Select v-model="searchModel.AreaCode"  placeholder="请选择..."  @on-change="getStatsData()" class="searchInput">
                        <Option :value="userinfo.AreaCode" v-if="userinfo.AreaCode=='530000000000'">全&nbsp;&nbsp;省</Option>
                        <Option :value="userinfo.AreaCode" v-else>全市/州</Option>
                        <Option :value="item.value" v-for="item in AreaList" :key="item.value">{{item.label}}</Option>
                    </Select>
                </Col>
                <Col v-show="searchModel.AreaCode=='530000000000'">
                    <label class="searchLabel">是否包含县（市、区）:</label>
                    <!-- <Cascader :data="AreaList" change-on-select @on-change='SearchCascaderChange'  class="searchInput"></Cascader>-->
                    <Select v-model="searchModel.IsCity"  @on-change="getStatsData()" class="searchInput">
                        <Option value="1">否</Option>
                        <Option value="2">是</Option>
                    </Select>
                </Col>
            <!--搜索框-->
                <Col    >
                    <label class="searchLabel">填报年度:</label>
                    <Select v-model="searchModel.FillInYear" placeholder="全部" :label-in-value="true" @on-change="getStatsData()" class="searchInput">
                        <Option :value="item.DictText" v-for="item in CreateYearList" :key="item.DictValue">{{item.DictText}}</Option>
                    </Select>
                </Col>
                <!-- <Col :lg="{span:5}" :md="{span:8}" :sm="{span:12}" :xs="{span:22}">
                    <label class="searchLabel">生产品种:</label>
                    <Select v-model="Option"  placeholder="请选择..." :label-in-value="true" clearable class="searchInput" @on-change="GetData">
                        <Option :value="item.value" v-for="item in Options" :key="item.value">{{item.name}}</Option>
                    </Select>
                </Col> -->
                <Col >
                    <Button type="primary" @click="DataExport()"  class="searchRight" icon="log-out" >数据导出</Button>
                    <RadioGroup v-model="CheckButton" @on-change="changeButton" type="button" class="searchRight" >
                        <Radio label="listShow" title="列表"><span class="totalLable"><Icon type="ios-list-outline" size="10"></Icon>&nbsp;列表</span></Radio>
                        <Radio label="barShow" title="柱状图"><span class="totalLable"><Icon type="stats-bars" size="10"></Icon>&nbsp;柱状图</span></Radio>   
                        <Radio label="mapShow" title="地图"><span class="totalLable"><Icon type="map" size="10"></Icon>&nbsp;地图</span></Radio>                                                                               
                    </RadioGroup> 
                </Col>
            </Row>
        </div>
        <Row  v-show="listShow">
            <!-- 列表-->
            <Col>
             <div style="width:100%;overflow:scroll;">
                <table class="ContentTable" style="width:240%;">
                    <caption>
                        <div><span class="tableNum">表7——{{searchModel.FillInYear}}{{userinfo.AreaCode|omgAreaName}}蚕桑生产信息调查表</span>
                            <span class="tip">单位：张、人、个、间、㎡、套、吨</span>
                        </div>
                    </caption>
                    <thead>
                        <tr>
                            <th rowspan="3" style="width:50px;">序号</th>
                            <!-- <th rowspan="3" style="width:72px;">年份</th> -->
                            <th rowspan="3" style="width:72px;">所属地区</th>
                            <th colspan="9">一、乡镇信息调查</th>
                            <th colspan="16">二、技术人员信息调查</th>
                            <th colspan="16">三、蚕室、蚕具调查</th>
                        </tr>
                        <tr>
                            <th rowspan="2">万亩以上乡（镇）数（个）</th>
                            <th rowspan="2">分别是</th>
                            <th rowspan="2">千亩以上村（委会）（个）</th>
                            <th rowspan="2">分别是</th>
                            <th rowspan="2">养蚕户（户）</th>
                            <th colspan="4">全年养蚕量（户）</th>
                            <th rowspan="2">技术人员总数（人）</th>
                            <th rowspan="2">其中：在职在编</th>
                            <th colspan="2">按性别分</th>
                            <th colspan="4">按年龄分</th>
                            <th colspan="4">按学历层次分</th>
                            <th colspan="4">职称情况</th>
                            <th rowspan="2">1.蚕种催青室间数（间）</th>
                            <th rowspan="2">面积（m2）</th>
                            <th rowspan="2">季催青能力（张）</th>
                            <th rowspan="2">年催青（张）</th>
                            <th rowspan="2">2.小蚕共育点（个）</th>
                            <th rowspan="2">面积（m2）</th>
                            <th rowspan="2">季共育能力（张）</th>
                            <th rowspan="2">年共育量（张）</th>
                            <th rowspan="2">3.大蚕室间数（间）</th>
                            <th rowspan="2">面积（m2）</th>
                            <th rowspan="2">省力化蚕台（套）</th>
                            <th rowspan="2">方格簇（张）</th>
                            <th rowspan="2">4.蚕茧收烘站（个）</th>
                            <th rowspan="2">面积（m2）</th>
                            <th rowspan="2">季收烘能力（吨）</th>
                            <th rowspan="2">循环烘茧机（套）</th>
                        </tr>
                        <tr>
                            <th>＜3张</th>
                            <th>≤5张</th>
                            <th>≤10张</th>
                            <th>＞10张</th>
                            <th>男</th>
                            <th>女</th>
                            <th>≤30岁</th>
                            <th>30-40岁</th>
                            <th>40-50岁</th>
                            <th>50岁以上</th>
                            <th>硕士及以上</th>
                            <th>本科</th>
                            <th>大专</th>
                            <th>中专（技校）</th>
                            <th>正高</th>
                            <th>副高</th>
                            <th>中职</th>
                            <th>初职</th>
                        </tr>
                        <tr v-if="datas.length>0">
                            <td style="width:50px;">{{1}}</td>
                            <!-- <td style="width:72px;">{{datas[0].year}}</td> -->
                            <td style="width:72px;">{{datas[0].AreaName}}</td>
                            <td>{{datas[0].NumTownship|integer|formatCurrency}}</td>
                            <td>{{datas[0].NumTownshipName}}</td>
                            <td>{{datas[0].NumVillage|integer|formatCurrency}}</td>
                            <td>{{datas[0].NumVillageName}}</td>
                            <td>{{datas[0].MulHouseholds|integer|formatCurrency}}</td>
                            <td>{{datas[0].AnnualSilkwormOne|integer|formatCurrency}}</td>
                            <td>{{datas[0].AnnualSilkwormTwo|integer|formatCurrency}}</td>
                            <td>{{datas[0].AnnualSilkwormThree|integer|formatCurrency}}</td>
                            <td>{{datas[0].AnnualSilkwormFour|integer|formatCurrency}}</td>
                            <td>{{datas[0].TecPersonTotalNum|integer|formatCurrency}}</td>
                            <td>{{datas[0].TecPersonAllInNum|integer|formatCurrency}}</td>
                            <td>{{datas[0].ManNum|integer|formatCurrency}}</td>
                            <td>{{datas[0].WomanNum|integer|formatCurrency}}</td>
                            <td>{{datas[0].AgeOne|integer|formatCurrency}}</td>
                            <td>{{datas[0].AgeTwo|integer|formatCurrency}}</td>
                            <td>{{datas[0].AgeThree|integer|formatCurrency}}</td>
                            <td>{{datas[0].AgeFour|integer|formatCurrency}}</td>
                            <td>{{datas[0].EduLevelOne|integer|formatCurrency}}</td>
                            <td>{{datas[0].EduLeveTwo|integer|formatCurrency}}</td>
                            <td>{{datas[0].EduLevelThree|integer|formatCurrency}}</td>
                            <td>{{datas[0].EduLevelFour|integer|formatCurrency}}</td>
                            <td>{{datas[0].TitleOne|integer|formatCurrency}}</td>
                            <td>{{datas[0].TitleTwo|integer|formatCurrency}}</td>
                            <td>{{datas[0].TitleThree|integer|formatCurrency}}</td>
                            <td>{{datas[0].TitleFour|integer|formatCurrency}}</td>
                            <td>{{datas[0].IncuRoomNum|integer|formatCurrency}}</td>
                            <td>{{datas[0].IncuRoomArea|decimal|formatCurrency}}</td>
                            <td>{{datas[0].JiCuiqingPower|integer|formatCurrency}}</td>
                            <td>{{datas[0].YearsOfIncu|integer|formatCurrency}}</td>
                            <td>{{datas[0].SilkwormSpots|integer|formatCurrency}}</td>
                            <td>{{datas[0].SilkwormArea|decimal|formatCurrency}}</td>
                            <td>{{datas[0].QuaternaryFertility|integer|formatCurrency}}</td>
                            <td>{{datas[0].AnnualTotalFertility|integer|formatCurrency}}</td>
                            <td>{{datas[0].LargeCocoonNum|integer|formatCurrency}}</td>
                            <td>{{datas[0].LargeCocoonArea|decimal|formatCurrency}}</td>
                            <td>{{datas[0].LaborSavingRearTable|integer|formatCurrency}}</td>
                            <td>{{datas[0].GridCluster|integer|formatCurrency}}</td>
                            <td>{{datas[0].CocoonStation|integer|formatCurrency}}</td>
                            <td>{{datas[0].CocoonStationArea|decimal|formatCurrency}}</td>
                            <td>{{datas[0].SeasonalDryCapacity|decimal|formatCurrency}}</td>
                            <td>{{datas[0].CircularDryMachine|integer|formatCurrency}}</td>
                        </tr>
                    </thead>
                    <tbody v-if="datas.length>0" style="max-height:380px">
                        <tr v-for="(item,index) in datas"  v-show="index!==0" :key="item.year" :class="{ red:AutoCity(item.AreaCode)}">
                            <td style="width:50px;">{{index+1}}</td>
                            <!-- <td style="width:72px;">{{item.year}}</td> -->
                            <td style="width:72px;">{{item.AreaName}}</td>
                            <td>{{item.NumTownship|integer|formatCurrency}}</td>
                            <td>{{item.NumTownshipName}}</td>
                            <td>{{item.NumVillage|integer|formatCurrency}}</td>
                            <td>{{item.NumVillageName}}</td>
                            <td>{{item.MulHouseholds|integer|formatCurrency}}</td>
                            <td>{{item.AnnualSilkwormOne|integer|formatCurrency}}</td>
                            <td>{{item.AnnualSilkwormTwo|integer|formatCurrency}}</td>
                            <td>{{item.AnnualSilkwormThree|integer|formatCurrency}}</td>
                            <td>{{item.AnnualSilkwormFour|integer|formatCurrency}}</td>
                            <td>{{item.TecPersonTotalNum|integer|formatCurrency}}</td>
                            <td>{{item.TecPersonAllInNum|integer|formatCurrency}}</td>
                            <td>{{item.ManNum|integer|formatCurrency}}</td>
                            <td>{{item.WomanNum|integer|formatCurrency}}</td>
                            <td>{{item.AgeOne|integer|formatCurrency}}</td>
                            <td>{{item.AgeTwo|integer|formatCurrency}}</td>
                            <td>{{item.AgeThree|integer|formatCurrency}}</td>
                            <td>{{item.AgeFour|integer|formatCurrency}}</td>
                            <td>{{item.EduLevelOne|integer|formatCurrency}}</td>
                            <td>{{item.EduLeveTwo|integer|formatCurrency}}</td>
                            <td>{{item.EduLevelThree|integer|formatCurrency}}</td>
                            <td>{{item.EduLevelFour|integer|formatCurrency}}</td>
                            <td>{{item.TitleOne|integer|formatCurrency}}</td>
                            <td>{{item.TitleTwo|integer|formatCurrency}}</td>
                            <td>{{item.TitleThree|integer|formatCurrency}}</td>
                            <td>{{item.TitleFour|integer|formatCurrency}}</td>
                            <td>{{item.IncuRoomNum|integer|formatCurrency}}</td>
                            <td>{{item.IncuRoomArea|decimal|formatCurrency}}</td>
                            <td>{{item.JiCuiqingPower|integer|formatCurrency}}</td>
                            <td>{{item.YearsOfIncu|integer|formatCurrency}}</td>
                            <td>{{item.SilkwormSpots|integer|formatCurrency}}</td>
                            <td>{{item.SilkwormArea|decimal|formatCurrency}}</td>
                            <td>{{item.QuaternaryFertility|integer|formatCurrency}}</td>
                            <td>{{item.AnnualTotalFertility|integer|formatCurrency}}</td>
                            <td>{{item.LargeCocoonNum|integer|formatCurrency}}</td>
                            <td>{{item.LargeCocoonArea|decimal|formatCurrency}}</td>
                            <td>{{item.LaborSavingRearTable|integer|formatCurrency}}</td>
                            <td>{{item.GridCluster|integer|formatCurrency}}</td>
                            <td>{{item.CocoonStation|integer|formatCurrency}}</td>
                            <td>{{item.CocoonStationArea|decimal|formatCurrency}}</td>
                            <td>{{item.SeasonalDryCapacity|decimal|formatCurrency}}</td>
                            <td>{{item.CircularDryMachine|integer|formatCurrency}}</td>
                        </tr>
                    </tbody>
                </table>
             </div>
            </Col>
         </Row>
         <Row v-show="barShow">
             <!-- 柱状图 -->
             <Tabs type="card">
                <TabPane label="一、乡镇信息调查"><div  id="divBarOne" style="border:1px solid #D7DDE4; ">乡镇信息</div></TabPane>
                <TabPane label="二、技术人员信息"><div  id="divBarTwo" style="border:1px solid #D7DDE4; ">技术人员信息</div></TabPane>
                <TabPane label="三、蚕室、蚕具信息"><div  id="divBarThree" style="margin-right:10px;border:1px solid #D7DDE4; ">蚕室、蚕具信息</div></TabPane>
            </Tabs>
        </Row>
        <Row  v-show="mapShow">
            <!--地图展示-->
            <Tabs type="card">
                <TabPane label="一、乡镇信息调查"><div  id="divMapOne" style="margin-right:10px;border:1px solid #D7DDE4; ;">乡镇信息</div></TabPane>
                <TabPane label="二、技术人员信息"><div  id="divMapTwo" style="margin-right:10px;border:1px solid #D7DDE4; ">技术人员信息</div></TabPane>
                <TabPane label="三、蚕室、蚕具信息"><div  id="divMapThree" style="margin-right:10px;border:1px solid #D7DDE4; ">蚕室、蚕具信息</div></TabPane>
            </Tabs>   
        </Row>
    </div>
</template>
<script>;
export default {
    data() {
        return {
            self: this,
            CreateYearList: this.GetGroupDict("ReportYear"), //年度
            CurrentYear: this.GetCurrentYear(),//当前年度
            AreaList: this.SearchAreaList(this.GetlocaStorage("CSuserinfo").AreaCode),
            CurrentAreaName:'',
            userinfo: this.GetlocaStorage("CSuserinfo"),//获取当前用户信息
            CheckButton:'listShow',
            datas:[],//列表数据
            //柱状图代码
            AreaData:[],
            //乡镇信息
            echartsItemOne:['万亩以上乡(镇)数','千亩以上村(委会)','养蚕户总数','全年养蚕量<3张','全年养蚕量≤5张','全年养蚕量≤10张','全年养蚕量>10张'],
            NumTownshipData:[],
            NumVillageData:[],
            MulHouseholdsData:[],
            AnnualSilkwormOneData:[],
            AnnualSilkwormTwoData:[],
            AnnualSilkwormThreeData:[],
            AnnualSilkwormFourData:[],
            barListOne:[],
            //技术人员信息
            echartsItemTwo:['技术人员总数','在职在编','男','女',
                            '≤30岁','30-40岁','40-50岁','50岁以上',
                            '硕士及以上','本科','大专','中专(技校)',
                            '正高',	'副高',	'中职',	'初职'
                            ],
            TecPersonTotalNumData:[],TecPersonAllInNumData:[],
            ManNumData:[],WomanNumData:[],
            AgeOneData:[],AgeTwoData:[],AgeThreeData:[],AgeFourData:[],
            EduLevelOneData:[],EduLevelTwoData:[],EduLevelThreeData:[],EduLevelFourData:[],
            TitleOneData:[],TitleTwoData:[],TitleThreeData:[],TitleFourData:[],
            barListTwo:[],
            //蚕室、蚕具信息
            echartsItemThree:['蚕种催青室间数','面积','季催青能力','年催青',
                            '小蚕共育点','面积','季共育能力','年共育量',
                            '大蚕室间数','面积','省力化蚕台','方格簇',
                            '蚕茧收烘站',	'面积',	'季收烘能力',	'循环烘茧机'
                            ],
            IncuRoomNumData:[],
            IncuRoomAreaData:[],
            JiCuiqingPowerData:[],
            YearsOfIncuData:[],
            SilkwormSpotsData:[],
            SilkwormAreaData:[],
            QuaternaryFertilityData:[],
            AnnualTotalFertilityData:[],
            LargeCocoonNumData:[],
            LargeCocoonAreaData:[],
            LaborSavingRearTableData:[],
            GridClusterData:[],
            CocoonStationData:[],
            CocoonStationAreaData:[],
            SeasonalDryCapacityData:[],
            CircularDryMachineData:[],
            ReelingEnterpriseData:[],
            ReelingCapacityOneData:[],
            ReelingCapacityTwoData:[],
            ReelingCapacityThreeData:[],
            ReelingCapacityFourData:[],
            SilkwormFieldData:[],
            ThroughPutData:[],
            SilkEnterpriseData:[],
            ProcessedSilkQuiltData:[],
            OtherData:[],
            OtherThroughPutData:[],
            barListThree:[],
            //地图数据
            GeoData:'',//top值
            mapType:'',//当前加载的地图模板
            //乡镇信息
            MapNumTownshipData:[],
            MapNumVillageData:[],
            MapMulHouseholdsData:[],
            MapAnnualSilkwormOneData:[],
            MapAnnualSilkwormTwoData:[],
            MapAnnualSilkwormThreeData:[],
            MapAnnualSilkwormFourData:[],
            mapListOne:[],
            //人员信息
            MapTecPersonTotalNumData:[],MapTecPersonAllInNumData:[],
            MapManNumData:[],MapWomanNumData:[],
            MapAgeOneData:[],MapAgeTwoData:[],MapAgeThreeData:[],MapAgeFourData:[],
            MapEduLevelOneData:[],MapEduLevelTwoData:[],MapEduLevelThreeData:[],MapEduLevelFourData:[],
            MapTitleOneData:[],MapTitleTwoData:[],MapTitleThreeData:[],MapTitleFourData:[],
            mapListTwo:[],
            //蚕室、蚕具信息
            MapIncuRoomNumData:[],
            MapIncuRoomAreaData:[],
            MapJiCuiqingPowerData:[],
            MapYearsOfIncuData:[],
            MapSilkwormSpotsData:[],
            MapSilkwormAreaData:[],
            MapQuaternaryFertilityData:[],
            MapAnnualTotalFertilityData:[],
            MapLargeCocoonNumData:[],
            MapLargeCocoonAreaData:[],
            MapLaborSavingRearTableData:[],
            MapGridClusterData:[],
            MapCocoonStationData:[],
            MapCocoonStationAreaData:[],
            MapSeasonalDryCapacityData:[],
            MapCircularDryMachineData:[],
            MapReelingEnterpriseData:[],
            MapReelingCapacityOneData:[],
            MapReelingCapacityTwoData:[],
            MapReelingCapacityThreeData:[],
            MapReelingCapacityFourData:[],
            MapSilkwormFieldData:[],
            MapThroughPutData:[],
            MapSilkEnterpriseData:[],
            MapProcessedSilkQuiltData:[],
            MapOtherData:[],
            MapOtherThroughPutData:[],
            mapListThree:[],
            //查询模型：根据需求删除不不要查询条件
            searchModel: {
                Id: '',
                ReportCode: 'MulAnnualProducStatist',
                FillInYear: '',
                TimesType: '',
                IsCity:'1',
                AreaCode: this.GetlocaStorage("CSuserinfo").AreaCode,
                PageNumber: 1,
                PageSize: 20,
                Status: '4',//已上报
                Opinion: ''
            },
            clientHeight: window.innerHeight - 300,//表格默认高度
            listShow:true,//列表显示控制器
            barShow:false,//饼图显示控制器
            mapShow:false,//地图显示控制器
        }
    },
    //高度计算
     mounted() {
        //table高度计算方法
        const that = this;
        window.onresize = () => {
            return (() => {
                that.clientHeight = window.innerHeight -300;
            })()
        };  
    },
    //方法
    methods: {
        //展示切换
        changeButton:function(n){
            if(n=="listShow")
            {
                this.listShow=true;//显示列表
                this.barShow=false;
                this.mapShow=false;
            }
            else if(n=="barShow")
            {
                this.listShow=false;
                this.barShow=true;//显示柱状图
                this.mapShow=false;
            }
             else if(n=="mapShow")
            {
                this.listShow=false;
                this.barShow=false;//显示地图
                this.mapShow=true;
            }
            else{
                 this.listShow=true;//默认显示列表
                 this.barShow=false;
                 this.mapShow=false;
            }
        },
        //获取地区统计数据
        getStatsData(obj){
            var self = this;
            var user = self.GetlocaStorage("CSuserinfo");
            // self.searchModel.AreaCode = user.AreaCode;//当前用户所属地区
            if (self.searchModel.FillInYear != null && self.searchModel.FillInYear != '') {
                self.searchModel.FillInYear = self.searchModel.FillInYear;//获取当前系统年份
            } else {
                self.searchModel.FillInYear = self.CurrentYear + '年'; //获取填报年度-----数据字典值
            }
            //柱状图数据
            self.AreaData=[],
            //乡镇信息
            self.NumTownshipData=[],
            self.NumVillageData=[],self.MulHouseholdsData=[],
            self.AnnualSilkwormOneData=[],self.AnnualSilkwormTwoData=[],
            self.AnnualSilkwormThreeData=[],self.AnnualSilkwormFourData=[],

            self.barListOne=[],
            //人员信息
            self.TecPersonTotalNumData=[],self.TecPersonAllInNumData=[],
            self.ManNumData=[],self.WomanNumData=[],
            self.AgeOneData=[],self.AgeTwoData=[],self.AgeThreeData=[],self.AgeFourData=[],
            self.EduLevelOneData=[],self.EduLevelTwoData=[],self.EduLevelThreeData=[],self.EduLevelFourData=[],
            self.TitleOneData=[],self.TitleTwoData=[],self.TitleThreeData=[],self.TitleFourData=[],
            self.barListTwo=[],
            //蚕室、蚕具信息
            self.IncuRoomNumData=[],self.IncuRoomAreaData=[],
            self.JiCuiqingPowerData=[],self.YearsOfIncuData=[],
            self.SilkwormSpotsData=[],self.SilkwormAreaData=[],
            self.QuaternaryFertilityData=[],self.AnnualTotalFertilityData=[],self.LargeCocoonNumData=[],
            self.LargeCocoonAreaData=[],self.LaborSavingRearTableData=[],self.GridClusterData=[],
            self.CocoonStationData=[],self.CocoonStationAreaData=[],
            self.SeasonalDryCapacityData=[],self.CircularDryMachineData=[],
            self.ReelingEnterpriseData=[],self.ReelingCapacityOneData=[],self.ReelingCapacityTwoData=[],
            self.ReelingCapacityThreeData=[],self.ReelingCapacityFourData=[],self.SilkwormFieldData=[],
            self.ThroughPutData=[],self.SilkEnterpriseData=[],self.ProcessedSilkQuiltData=[],
            self.OtherData=[],self.OtherThroughPutData=[],
            self.barListThree=[],
            //地图数据
            //乡镇信息
            self.MapNumTownshipData=[],
            self.MapNumVillageData=[],self.MapMulHouseholdsData=[],
            self.MapAnnualSilkwormOneData=[],self.MapAnnualSilkwormTwoData=[],
            self.MapAnnualSilkwormThreeData=[],self.MapAnnualSilkwormFourData=[],
            self.mapListOne=[],
             //人员信息
            self.MapTecPersonTotalNumData=[],self.MapTecPersonAllInNumData=[],
            self.MapManNumData=[],self.MapWomanNumData=[],
            self.MapAgeOneData=[],self.MapAgeTwoData=[],self.MapAgeThreeData=[],self.MapAgeFourData=[],
            self.MapEduLevelOneData=[],self.MapEduLevelTwoData=[],self.MapEduLevelThreeData=[],self.MapEduLevelFourData=[],
            self.MapTitleOneData=[],self.MapTitleTwoData=[],self.MapTitleThreeData=[],self.MapTitleFourData=[],
            self.mapListTwo=[],
            //蚕室、蚕具信息
            self.MapIncuRoomNumData=[],self.MapIncuRoomAreaData=[],
            self.MapJiCuiqingPowerData=[],self.MapYearsOfIncuData=[],
            self.MapSilkwormSpotsData=[],self.MapSilkwormAreaData=[],
            self.MapQuaternaryFertilityData=[],self.MapAnnualTotalFertilityData=[],self.MapLargeCocoonNumData=[],
            self.MapLargeCocoonAreaData=[],self.MapLaborSavingRearTableData=[],self.MapGridClusterData=[],
            self.MapCocoonStationData=[],self.MapCocoonStationAreaData=[],
            self.MapSeasonalDryCapacityData=[],self.MapCircularDryMachineData=[],
            self.MapReelingEnterpriseData=[],self.MapReelingCapacityOneData=[],self.MapReelingCapacityTwoData=[],
            self.MapReelingCapacityThreeData=[],self.MapReelingCapacityFourData=[],self.MapSilkwormFieldData=[],
            self.MapThroughPutData=[],self.MapSilkEnterpriseData=[],self.MapProcessedSilkQuiltData=[],
            self.MapOtherData=[],self.MapOtherThroughPutData=[],
            self.mapListThree=[],

            self.mapType=self.searchModel.AreaCode;
            self.GeoData=self.GetGeoData(self.mapType);
            self.$http.post('MulProdInfoChart/PostStatsList', self.searchModel).then(function (res) {
                if (res.data.status === 1) {
                    if (res.data.model!=null) {
                        self.datas=res.data.model;//列表赋值
                        self.CurrentAreaName=res.data.model[0].AreaName;//当前州(市)或者省
                        for(var i=1;i<res.data.model.length;i++)
                        {
                            //柱状图数据
                            self.AreaData.push(res.data.model[i].AreaName);
                            //乡镇信息
                            self.NumTownshipData.push(res.data.model[i].NumTownship);
                            self.NumVillageData.push(res.data.model[i].NumVillage);
                            self.MulHouseholdsData.push(res.data.model[i].MulHouseholds);
                            self.AnnualSilkwormOneData.push(res.data.model[i].AnnualSilkwormOne);
                            self.AnnualSilkwormTwoData.push(res.data.model[i].AnnualSilkwormTwo);
                            self.AnnualSilkwormThreeData.push(res.data.model[i].AnnualSilkwormThree);
                            self.AnnualSilkwormFourData.push(res.data.model[i].AnnualSilkwormFour);
                            //技术人员信息
                            self.TecPersonTotalNumData.push(res.data.model[i].TecPersonTotalNum);
                            self.TecPersonAllInNumData.push(res.data.model[i].TecPersonAllInNum);
                            self.ManNumData.push(res.data.model[i].ManNum);
                            self.WomanNumData.push(res.data.model[i].WomanNum);
                            self.AgeOneData.push(res.data.model[i].AgeOne);
                            self.AgeTwoData.push(res.data.model[i].AgeTwo);
                            self.AgeThreeData.push(res.data.model[i].AgeThree);
                            self.AgeFourData.push(res.data.model[i].AgeFour);
                            self.EduLevelOneData.push(res.data.model[i].EduLevelOne);
                            self.EduLevelTwoData.push(res.data.model[i].EduLevelTwo);
                            self.EduLevelThreeData.push(res.data.model[i].EduLevelThree);
                            self.EduLevelFourData.push(res.data.model[i].EduLevelFour);
                            self.TitleOneData.push(res.data.model[i].TitleOne);
                            self.TitleTwoData.push(res.data.model[i].TitleTwo);
                            self.TitleThreeData.push(res.data.model[i].TitleThree);
                            self.TitleFourData.push(res.data.model[i].TitleFour);
                            //蚕室、蚕具信息
                            self.IncuRoomNumData.push(res.data.model[i].IncuRoomNum);
                            self.IncuRoomAreaData.push(res.data.model[i].IncuRoomArea);
                            self.JiCuiqingPowerData.push(res.data.model[i].JiCuiqingPower);
                            self.YearsOfIncuData.push(res.data.model[i].YearsOfIncu);
                            self.SilkwormSpotsData.push(res.data.model[i].SilkwormSpots);
                            self.SilkwormAreaData.push(res.data.model[i].SilkwormArea);
                            self.QuaternaryFertilityData.push(res.data.model[i].QuaternaryFertility);
                            self.AnnualTotalFertilityData.push(res.data.model[i].AnnualTotalFertility);
                            self.LargeCocoonNumData.push(res.data.model[i].LargeCocoonNum);
                            self.LargeCocoonAreaData.push(res.data.model[i].LargeCocoonArea);
                            self.LaborSavingRearTableData.push(res.data.model[i].LaborSavingRearTable);
                            self.GridClusterData.push(res.data.model[i].GridCluster);
                            self.CocoonStationData.push(res.data.model[i].CocoonStation);
                            self.CocoonStationAreaData.push(res.data.model[i].CocoonStationArea);
                            self.SeasonalDryCapacityData.push(res.data.model[i].SeasonalDryCapacity);
                            self.CircularDryMachineData.push(res.data.model[i].CircularDryMachine);
                            self.ReelingEnterpriseData.push(res.data.model[i].ReelingEnterprise);
                            self.ReelingCapacityOneData.push(res.data.model[i].eelingCapacityOne);
                            self.ReelingCapacityTwoData.push(res.data.model[i].ReelingCapacityTwo);
                            self.ReelingCapacityThreeData.push(res.data.model[i].ReelingCapacityThree);
                            self.ReelingCapacityFourData.push(res.data.model[i].ReelingCapacityFour);
                            self.SilkwormFieldData.push(res.data.model[i].SilkwormField);
                            self.ThroughPutData.push(res.data.model[i].ThroughPut);
                            self.SilkEnterpriseData.push(res.data.model[i].SilkEnterprise);
                            self.ProcessedSilkQuiltData.push(res.data.model[i].ProcessedSilkQuilt);
                            self.OtherData.push(res.data.model[i].Other);
                            self.OtherThroughPutData.push(res.data.model[i].OtherThroughPut);
                            //地图数据
                            //乡镇信息
                            self.MapNumTownshipData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].NumTownship});
                            self.MapNumVillageData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].NumVillage});
                            self.MapMulHouseholdsData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].MulHouseholds});
                            self.MapAnnualSilkwormOneData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].AnnualSilkwormOne});
                            self.MapAnnualSilkwormTwoData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].AnnualSilkwormTwo});
                            self.MapAnnualSilkwormThreeData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].AnnualSilkwormThree});
                            self.MapAnnualSilkwormFourData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].AnnualSilkwormFour});
                            //技术人员信息
                            self.MapTecPersonTotalNumData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].TecPersonTotalNum});
                            self.MapTecPersonAllInNumData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].TecPersonAllInNum});
                            self.MapManNumData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].ManNum});
                            self.MapWomanNumData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].WomanNum});
                            self.MapAgeOneData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].AgeOne});
                            self.MapAgeTwoData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].AgeTwo});
                            self.MapAgeThreeData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].AgeThree});
                            self.MapAgeFourData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].AgeFour});
                            self.MapEduLevelOneData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].EduLevelOne});
                            self.MapEduLevelTwoData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].EduLevelTwo});
                            self.MapEduLevelThreeData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].EduLevelThree});
                            self.MapEduLevelFourData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].EduLevelFour});
                            self.MapTitleOneData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].TitleOne});
                            self.MapTitleTwoData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].TitleTwo});
                            self.MapTitleThreeData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].TitleThree});
                            self.MapTitleFourData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].TitleFour});
                            //蚕室、蚕具信息
                            self.MapIncuRoomNumData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].IncuRoomNum});
                            self.MapIncuRoomAreaData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].IncuRoomArea});
                            self.MapJiCuiqingPowerData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].JiCuiqingPower});
                            self.MapYearsOfIncuData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].YearsOfIncu});
                            self.MapSilkwormSpotsData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].SilkwormSpots});
                            self.MapSilkwormAreaData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].SilkwormArea});
                            self.MapQuaternaryFertilityData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].QuaternaryFertility});
                            self.MapAnnualTotalFertilityData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].AnnualTotalFertility});
                            self.MapLargeCocoonNumData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].LargeCocoonNum});
                            self.MapLargeCocoonAreaData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].LargeCocoonArea});
                            self.MapLaborSavingRearTableData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].LaborSavingRearTable});
                            self.MapGridClusterData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].GridCluster});
                            self.MapCocoonStationData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].CocoonStation});
                            self.MapCocoonStationAreaData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].CocoonStationArea});
                            self.MapSeasonalDryCapacityData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].SeasonalDryCapacity});
                            self.MapCircularDryMachineData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].CircularDryMachine});
                            self.MapReelingEnterpriseData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].ReelingEnterprise});
                            self.MapReelingCapacityOneData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].eelingCapacityOne});
                            self.MapReelingCapacityTwoData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].ReelingCapacityTwo});
                            self.MapReelingCapacityThreeData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].ReelingCapacityThree});
                            self.MapReelingCapacityFourData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].ReelingCapacityFour});
                            self.MapSilkwormFieldData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].SilkwormField});
                            self.MapThroughPutData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].ThroughPut});
                            self.MapSilkEnterpriseData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].SilkEnterprise});
                            self.MapProcessedSilkQuiltData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].ProcessedSilkQuilt});
                            self.MapOtherData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].Other});
                            self.MapOtherThroughPutData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].OtherThroughPut});
                        }
                        //柱状图信息                       
                        //乡镇信息
                        self.barListOne.push(self.NumTownshipData,self.NumVillageData,self.MulHouseholdsData,self.AnnualSilkwormOneData);
                        self.barListOne.push(self.AnnualSilkwormTwoData,self.AnnualSilkwormThreeData,self.AnnualSilkwormFourData);
                        //人员信息
                        self.barListTwo.push(self.TecPersonTotalNumData,self.TecPersonAllInNumData,self.ManNumData,self.WomanNumData);
                        self.barListTwo.push(self.AgeOneData,self.AgeTwoData,self.AgeThreeData,self.AgeFourData);
                        self.barListTwo.push(self.EduLevelOneData,self.EduLevelTwoData,self.EduLevelThreeData,self.EduLevelFourData);
                        self.barListTwo.push(self.TitleOneData,self.TitleTwoData,self.TitleThreeData,self.TitleFourData);
                        //蚕具信息
                        self.barListThree.push(self.TecPersonTotalNumData,self.TecPersonAllInNumData,self.ManNumData,self.WomanNumData);
                        self.barListThree.push(self.AgeOneData,self.AgeTwoData,self.AgeThreeData,self.AgeFourData);
                        self.barListThree.push(self.EduLevelOneData,self.EduLevelTwoData,self.EduLevelThreeData,self.EduLevelFourData);
                        self.barListThree.push(self.TitleOneData,self.TitleTwoData,self.TitleThreeData,self.TitleFourData);
                        //地图数据
                        //乡镇信息
                        self.mapListOne.push(self.MapNumTownshipData,self.MapNumVillageData,self.MapMulHouseholdsData,self.MapAnnualSilkwormOneData);
                        self.mapListOne.push(self.MapAnnualSilkwormTwoData,self.MapAnnualSilkwormThreeData,self.MapAnnualSilkwormFourData);
                        //人员信息
                        self.mapListTwo.push(self.MapTecPersonTotalNumData,self.MapTecPersonAllInNumData,self.MapManNumData,self.MapWomanNumData);
                        self.mapListTwo.push(self.MapAgeOneData,self.MapAgeTwoData,self.MapAgeThreeData,self.MapAgeFourData);
                        self.mapListTwo.push(self.MapEduLevelOneData,self.MapEduLevelTwoData,self.MapEduLevelThreeData,self.MapEduLevelFourData);
                        self.mapListTwo.push(self.MapTitleOneData,self.MapTitleTwoData,self.MapTitleThreeData,self.MapTitleFourData);
                        //蚕具信息
                        self.mapListThree.push(self.MapTecPersonTotalNumData,self.MapTecPersonAllInNumData,self.MapManNumData,self.MapWomanNumData);
                        self.mapListThree.push(self.MapAgeOneData,self.MapAgeTwoData,self.MapAgeThreeData,self.MapAgeFourData);
                        self.mapListThree.push(self.MapEduLevelOneData,self.MapEduLevelTwoData,self.MapEduLevelThreeData,self.MapEduLevelFourData);
                        self.mapListThree.push(self.MapTitleOneData,self.MapTitleTwoData,self.MapTitleThreeData,self.MapTitleFourData);
                        self.showEcharts();
                    }
                } 
                else {
                    self.$Modal.error({
                    title: '提示信息',
                    content: res.data.message
                    });
                }
            });
            if(self.searchModel.IsCity!="1")
            {
                self.$http.post('MulProdInfoChart/PostStatsDetailList', self.searchModel).then(function (res) {
                    if (res.data.status === 1) {
                        if (res.data.model!=null) {
                            self.datas=res.data.model;//列表赋值
                            self.CurrentAreaName=res.data.model[0].AreaName;//当前州(市)或者省                
                        }
                    } 
                    else {
                        self.$Modal.error({
                        title: '提示信息',
                        content: res.data.message
                        });
                    }
                });
            }
        },
        AutoCity(AreaCode){
            var result=false;
            if(AreaCode!=null&&AreaCode!=""&&this.searchModel.IsCity=="2")
            {
                if(AreaCode.substr(4,2)=="00")
                {
                    result=true;
                }
            }
            return result;
        },
        DataExport(){
            //导出
           var self = this;
            var user = self.GetlocaStorage("CSuserinfo");
            if (self.searchModel.FillInYear != null && self.searchModel.FillInYear != '') {
                self.searchModel.FillInYear = self.searchModel.FillInYear;//获取当前系统年份
            } 
            else {
                self.searchModel.FillInYear = self.CurrentYear + '年'; //获取填报年度-----数据字典值
            }
            window.open(this.$http.defaults.baseURL + "MulProdInfoChart/GetStatsExcelData?FillInYear=" + self.searchModel.FillInYear+"&&AreaCode=" + self.searchModel.AreaCode+"&&Status=" + self.searchModel.Status);
        },
                //展示柱状图和地图代码
        showEcharts(){
            //************************显示柱状图
            var self=this;

            var containerTable=document.getElementsByClassName('ivu-col ivu-col-span-4');


            //乡镇信息
            var containerBarOne=document.getElementById('divBarOne');
            //人员信息
            var containerBarTwo=document.getElementById('divBarTwo');
            //
            var containerBarThree=document.getElementById('divBarThree');
            // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            var resizeContainerBar = function () {
                containerBarOne.style.width = (window.innerWidth- containerTable[0].clientWidth-40)+'px';
                containerBarOne.style.height = (window.innerHeight-240)+'px';
                containerBarTwo.style.width = (window.innerWidth- containerTable[0].clientWidth-40)+'px';
                containerBarTwo.style.height = (window.innerHeight-240)+'px';
                containerBarThree.style.width = (window.innerWidth- containerTable[0].clientWidth-40)+'px';
                containerBarThree.style.height = (window.innerHeight-240)+'px';
            };
            //设置容器高宽
            resizeContainerBar();
            //乡镇信息
            var myBarOne = myEcharts.init(containerBarOne, 'shine');
            var BarNameOne= '表7——'+self.searchModel.FillInYear+self.CurrentAreaName+'乡镇信息柱状统计图';
            var optionBarOne =self.GetBarOption(BarNameOne,self.AreaData,self.echartsItemOne,self.barListOne,'bar');
            myBarOne.setOption(optionBarOne);
            //人员信息
            var myBarTwo = myEcharts.init(containerBarTwo, 'shine');
            var BarNameTwo='表7——'+self.searchModel.FillInYear+self.CurrentAreaName+'技术人员信息柱状统计图';
            var optionBarTwo = self.GetBarOption(BarNameTwo,self.AreaData,self.echartsItemTwo,self.barListTwo,'bar');
            myBarTwo.setOption(optionBarTwo);
            //蚕具信息
            var myBarThree = myEcharts.init(containerBarThree, 'shine');
            var BarNameThree='表7——'+self.searchModel.FillInYear+self.CurrentAreaName+'蚕室、蚕具信息柱状统计图';
            var optionBarThree = self.GetBarOption(BarNameThree,self.AreaData,self.echartsItemThree,self.barListThree,'bar');
            myBarThree.setOption(optionBarThree);
            //柱状图展示完
            //******************显示地图
            var containerMapOne=document.getElementById('divMapOne');
            var containerMapTwo=document.getElementById('divMapTwo');
            var containerMapThree=document.getElementById('divMapThree');
            // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            var resizeContainerMap = function () {
                //containerTable[0].clientWidth 左侧当前菜单栏的宽度
                containerMapOne.style.width = (window.innerWidth- containerTable[0].clientWidth-40)+'px';
                containerMapOne.style.height = (window.innerHeight-260)+'px';
                containerMapTwo.style.width = (window.innerWidth- containerTable[0].clientWidth-40)+'px';
                containerMapTwo.style.height = (window.innerHeight-260)+'px';
                containerMapThree.style.width = (window.innerWidth- containerTable[0].clientWidth-40)+'px';
                containerMapThree.style.height = (window.innerHeight-260)+'px';
            };
            //设置容器高宽
            resizeContainerMap();
            //乡镇信息
            var myMapOne = myEcharts.init(containerMapOne, 'shine');
            var MapNameOne='表7——'+self.searchModel.FillInYear+self.CurrentAreaName+'乡镇信息统计地区分布图';
            var optionMapOne = self.GetMapOption(MapNameOne,self.GeoData,self.mapType,self.echartsItemOne,self.mapListOne);
            myMapOne.setOption(optionMapOne);

            //人员信息
            var myMapTwo = myEcharts.init(containerMapTwo, 'shine');
            var MapNameTwo='表7——'+self.searchModel.FillInYear+self.CurrentAreaName+'技术人员信息统计地区分布图';
            var optionMapTwo = self.GetMapOption(MapNameTwo,self.GeoData,self.mapType,self.echartsItemTwo,self.mapListTwo);
            myMapTwo.setOption(optionMapTwo);
            //蚕具信息
            var myMapThree = myEcharts.init(containerMapThree, 'shine');
            var MapNameThree='表7——'+self.searchModel.FillInYear+self.CurrentAreaName+'蚕室、蚕具信息统计地区分布图';
            var optionMapThree = self.GetMapOption(MapNameThree,self.GeoData,self.mapType,self.echartsItemThree,self.mapListThree);
            myMapThree.setOption(optionMapThree);
            //用于使chart自适应高度和宽度
            window.onresize = function () {
                //重置容器高宽
                resizeContainerBar();
                resizeContainerMap();
                myBarOne.resize();
                myBarTwo.resize();
                myBarThree.resize();
                myMapOne.resize();
                myMapTwo.resize();
                myMapThree.resize();
            };
        }
    },
    //创建Vue页面方法
    created: function () { 
        this.getStatsData();   //获取地区统计数据                
    },
    watch: {
        //需要监听的在此处新增监听对象
    }
}
</script>
<style scoped src="../../styles/stats.css"></style>
